1 项目中经常出现的结构和文件

1.1 src

  • 源代码所在目录

1.2 doc/docs

  • 设计文档/API等所在目录

1.3 dist

  • 生成的发布文件所在目录

1.4 test/tests

  • 测试用例,单元测试所在目录

1.5 demo/example/expmples

  • 可运行的功能使用样例代码所在目录

1.6 package.json

  • npm项目的主配置文件

1.7 bower.json

  • 使用bower管理的node项目的包依赖配置文件

1.8 ChangeLog/ChangeLog.md/CHANGELOG

  • 项目的版本发布流水账

1.9 ReadMe/ReadMe.md/README

  • 项目的整体概要说明文件，比如说明项目的特性，如何部署，如何使用等

1.10 .babelrc

  • babel转换工具的配置文件，参考

  • 参考样例文件

    1
    2
    3
    4
    5
    6
    7
    8
    {
      "presets": ["es2015"],
      "plugins": ["transform-es2015-modules-umd"]，
      "ignore": [
        "foo.js",
        "bar/**/*.js"
      ]
    }

1.11 .npmignore

  • 在发布到npm源上需要忽略的文件

  • npm默认的配置文件，如果需要添加此外的文件(node_modules除外)，需要自己再添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .*.swp
    ._*
    .DS_Store
    .git
    .hg
    .npmrc
    .lock-wscript
    .svn
    .wafpickle-*
    config.gypi
    CVS
    npm-debug.log

    ​

1.12 LICENCE/LICENSE

  • 项目支持的开源协议许可

  • 可以到这里,或者这里查看一个完整的列表

  • 样例文件参考 MIT

    1
    2
    3
    4
    5
    6
    7
    Copyright <YEAR> <COPYRIGHT HOLDER>

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    ​

1.13 .gitignore

  • 是git用来区分哪些文件需要不加入版本库（被忽略）的配置文件，只影响未加入版本库的文件，所以这个最好在项目开始就搞好。

  • 如果你不了解，可以到这里去下载一个相似的模板，也可以到这里 去自动生成一个更详尽的，需要本地配置参考这里。

  • 解析匹配规则参考git doc,Linux glob

  • 常用规则

    • #开头的行和空行不对规则产生影响，常用来做注释和格式化
    • 单纯的字符串表示同名的目录或文件
    • ?匹配单个字符,*匹配多个字符,!表示对规则例外
    • [a-z]表示匹配范围中的任何一个字符，[!a-z]表示匹配不在此范围内的任何一个字符
    • 通配字符不匹配路径中的/字符，也不匹配.字符
    • 以/开头的只匹配当前目录下的文件
    • 以/结尾的规则表示匹配一个目录
    • 路径中的**匹配多层级的目录结构

  • 样例配置参考(在这里自动生成的macOS下用WebStorm做Node开发的配置)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    # Created by https://www.gitignore.io/api/node,macos,webstorm

    ### Node ###
    # Logs
    logs
    *.log
    npm-debug.log*

    # Runtime data
    pids
    *.pid
    *.seed
    *.pid.lock

    # Directory for instrumented libs generated by jscoverage/JSCover
    lib-cov

    # Coverage directory used by tools like istanbul
    coverage

    # nyc test coverage
    .nyc_output

    # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
    .grunt

    # node-waf configuration
    .lock-wscript

    # Compiled binary addons (http://nodejs.org/api/addons.html)
    build/Release

    # Dependency directories
    node_modules
    jspm_packages

    # Optional npm cache directory
    .npm

    # Optional eslint cache
    .eslintcache

    # Optional REPL history
    .node_repl_history

    # Output of 'npm pack'
    *.tgz

    # Yarn Integrity file
    .yarn-integrity



    ### macOS ###
    *.DS_Store
    .AppleDouble
    .LSOverride

    # Icon must end with two \r
    Icon
    # Thumbnails
    ._*
    # Files that might appear in the root of a volume
    .DocumentRevisions-V100
    .fseventsd
    .Spotlight-V100
    .TemporaryItems
    .Trashes
    .VolumeIcon.icns
    .com.apple.timemachine.donotpresent
    # Directories potentially created on remote AFP share
    .AppleDB
    .AppleDesktop
    Network Trash Folder
    Temporary Items
    .apdisk


    ### WebStorm ###
    # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
    # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839

    # User-specific stuff:
    .idea/workspace.xml
    .idea/tasks.xml

    # Sensitive or high-churn files:
    .idea/dataSources/
    .idea/dataSources.ids
    .idea/dataSources.xml
    .idea/dataSources.local.xml
    .idea/sqlDataSources.xml
    .idea/dynamic.xml
    .idea/uiDesigner.xml

    # Gradle:
    .idea/gradle.xml
    .idea/libraries

    # Mongo Explorer plugin:
    .idea/mongoSettings.xml

    ## File-based project format:
    *.iws

    ## Plugin-specific files:

    # IntelliJ
    /out/

    # mpeltonen/sbt-idea plugin
    .idea_modules/

    # JIRA plugin
    atlassian-ide-plugin.xml

    # Crashlytics plugin (for Android Studio and IntelliJ)
    com_crashlytics_export_strings.xml
    crashlytics.properties
    crashlytics-build.properties
    fabric.properties

    ### WebStorm Patch ###
    # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721

    # *.iml
    # modules.xml
    # .idea/misc.xml
    # *.ipr

    # End of https://www.gitignore.io/api/node,macos,webstorm

    ​

1.14 .editorconfig

  • 是用来维护同一套代码在不同的编辑环境中的代码风格一致性的配置文件。

  • 这个工具目前有多种语言的开发库，并对目前常见的编辑器和IDE都有相应的插件适配，是一个靠谱的方案。

  • 使用EditorConfig的项目列表, Node.js的配置文件, webpack的配置文件

  • 通配符参考

    • * 匹配除/之外的任意单个字符
    • **匹配字符串
    • ?匹配任意单个字符
    • [xyz]匹配中括号内的任一字符
    • [!xyz]匹配不在中括号内的任一字符
    • [a-z]匹配范围内的任一字符
    • {abc,opq,xyz}匹配这三个字符串中的任何一个
    • {123..456}匹配两个数字之间的任何一个

  • 常用属性参考, 全部属性

    • root=true表示到此终止对.editorconfig配置的查找，这里就是最顶层的配置
    • indent_style 可选值为tab,space,unset 设置缩进的风格
    • indent_size 当indent_style=space时的缩进字符数
    • tab_width当indent_style=tab时的缩进字符数
    • end_of_line可选值为lf，cr,crlf，设置换行的风格
    • charset 设置编码比如utf-8
    • trim_trailing_whitespace可选值为true,false设置是否删除行尾空白符
    • intsert_final_newline可选值true，false设置是否添加文件结尾的空行

  • 样例配置参考

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    root = true

    [*]
    indent_style = tab
    indent_size = 4
    charset = utf-8
    trim_trailing_whitespace = true
    insert_final_newline = true
    max_line_length = 233

    [*.json]
    indent_style = space
    indent_size = 2

    [*.yml]
    indent_style = space
    indent_size = 2

    [test/cases/parsing/bom/bomfile.{css,js}]
    charset = utf-8-bom

    [*.md]
    trim_trailing_whitespace = false

2 参考资料

  1. git ignore files
  2. gitignore
  3. gitignore.io
  4. glob wiki
  5. Linux glob
  6. editorconfig github
  7. editorconfig.org
  8. 开源协议说明 OpenSource
  9. 开源协议说明 SPDX
  10. babelrc配置

最后更新： 2022年03月02日 03:32

原始链接： http://rawbin-.github.io/dev-env/2016-09-26-fe-project-structure/

赏
× 赞赏这个人~
打赏二维码